import React, { useEffect, useState } from "react";
import "./index.less";
import { List } from "antd";
import NavBar from "../../components/NavBar";
import { sse } from "../../utils/sse";
const Notification: React.FC = () => {
  const [msg, setMsg] = useState<string[]>([]);
  const callback = (data: any) => {
    console.log(data);
    setMsg((preValue: string[]) => [...preValue, data]);
  };
  useEffect(() => {
    const url = "api/sse/connect";
    const cleanSse = sse(url, callback);
    return cleanSse;
  }, []);
  return (
    <>
      <NavBar></NavBar>
      <div>
        <List
          size="large"
          header={<h2>通知消息</h2>}
          bordered
          dataSource={msg}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </div>
    </>
  );
};
export default Notification;
